<template>
  <div class="page f-c f-g">
    <div class="card f-s f-r a-c" style="margin-bottom: 20px;">
      <div class="f-r a-c">
        <el-form inline>
          <el-form-item style="margin-right: 0" label="项目筛选">
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="searchParams.dateTime"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchParams.task" style="width: 200px">
              <el-option v-for="item in taskList" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchParams.model" style="width: 200px">
              <el-option v-for="item in modelList" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-box f-g f-c">
      <div class="f-g">
        <el-table height="100%" :data="dataSource" size="large">
          <el-table-column type="index" label="序号" width="80px">
          </el-table-column>
          <el-table-column label="无人机" prop="name"> </el-table-column>
          <el-table-column label="总飞行里程/km" prop="name"> </el-table-column>
          <el-table-column label="站点" prop="name"> </el-table-column>
          <el-table-column label="任务状态" prop="name"> </el-table-column>
          <el-table-column label="开始时间" prop="name"> </el-table-column>
          <el-table-column label="结束时间" prop="name"> </el-table-column>
          <el-table-column label="操作" width="160px">
            <template #default="scope">
              <el-button type="text" @click="openDetail(scope.row)">详情</el-button>
              <el-button type="text" @click="openMap(scope.row)">轨迹</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding: 20px 0;text-align: center" class="f-r j-c a-c f-s">
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="changeSize"
            @current-change="changePage"
        />
      </div>
    </div>

    <el-dialog modal-class="flyRecordMapDialog" v-model="dialogMap" :show-close="false">
      <div class="flyRecordMap">
        <div class="map" id="flyRecordMap"></div>
        <div class="flyRecordMap-control">
          <div class="flyRecordMap-control-left">
            <div class="flyRecordMap-control-text">
              执飞中：<span class="green">{{ control.online }}</span> 丨 离线中：<span class="red">{{ control.offline }}</span>
            </div>
          </div>
          <div class="flyRecordMap-control-right f-r a-c">
            <div class="f-r a-c" style="margin-left: 20px">
              <div class="refresh-icon all1" @click="layout1"></div>
              <div class="refresh-icon all2"  @click="layout2"></div>
              <div class="refresh-icon all"  @click="layout3"></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {onUnmounted, ref} from "vue";
import useTable from "@/utils/useTable";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
// 任务
const taskList = ref([
  {
    id: 1,
    name: '航线规划'
  },
  {
    id: 2,
    name: '飞行'
  },
  {
    id: 3,
    name: '数据处理'
  }
]);
// 机型列表
const modelList = ref([
  {
    id: 1,
    name: 'Matrice 300 RTK'
  },
  {
    id: 2,
    name: 'DJI Mavic 3 行业系列'
  },
  {
    id: 3,
    name: 'DJI Mavic 3 多光谱版'
  },
  {
    id: 4,
    name: '经纬 M30 系列'
  },
  {
    id: 5,
    name: '经纬 M300 RTK'
  }
]);

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
} = useTable({
  requestFn: { page: null },
  params: {
    task: '',
    model: '',
    dateTime: ''
  }
})
dataSource.value = [
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
]

const dialogMap = ref(false)
const rowItem = ref(null)
const openDetail = (row) => {
}

const control = ref({
  online: 0,
  offline: 0
})
const layout1 = () => {
}
const layout2 = () => {
}
const layout3 = () => {
}

/**
 * 地图
 */
let map = null;
const openMap = (row) => {
  rowItem.value = row
  dialogMap.value = true
  if (!map) {
    AMapLoader.load({
      key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
          map = new AMap.Map("flyRecordMap", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            layers: [new AMap.TileLayer.Satellite()],
            zoom: 14, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
  }
}
onUnmounted(() => {
  map?.destroy();
});

</script>

<style lang="scss">
.page {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .card {
    padding: 12px 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    .title {
      font-family: PingFang SC;
      font-size: 16px;
      color: #1A1A1A;
      line-height: 20px;
      font-weight: 500;
    }
  }
}
.flyRecordMapDialog {
  .el-dialog {
    padding: 0;
    background-color: transparent;
  }
  .el-dialog__header {
    display: none;
  }
  .flyRecordMap {
    width: 100%;
    min-height: 50vh;
    position: relative;
    .map {
      width: 100%;
      min-height: 50vh;
      background-color: green;
    }
    .flyRecordMap-control {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.3);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 99;
      .flyRecordMap-control-text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 24px;
        .green {
          color: #27FF45
        }
        .red {
          color: #FF2020
        }
        .green2 {
          color: #17BDB2;
        }
      }
      .flyRecordMap-control-left {
        display: flex;
        align-items: center;
        .wifi-icon {
          width: 24px;
          height: 18px;
          margin-right: 10px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .wifi-icon-1 {
          background-image: url("~@/assets/monitor/wifi-1.png");
        }
        .wifi-icon-2 {
          background-image: url("~@/assets/monitor/wifi-2.png");
        }
        .wifi-icon-3 {
          background-image: url("~@/assets/monitor/wifi-3.png");
        }
        .wifi-icon-4 {
          background-image: url("~@/assets/monitor/wifi-4.png");
        }
      }
      .refresh-icon {
        width: 20px;
        height: 18px;
        margin-left: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/monitor/refresh.png");
        cursor: pointer;
      }
      .all {
        background-image: url("~@/assets/monitor/all.png");
      }
      .all1 {
        background-image: url("~@/assets/monitor/all1.png");
      }
      .all2 {
        background-image: url("~@/assets/monitor/all2.png");
      }
    }
  }
}
</style>